<template>
  <w-vertical class="pl-amappicker f-rel" height="*">
    <div class="pl-amappicker-map f-height" ref="container" w-height="*"></div>
    <w-text ref="address" class="pl-amappicker-search" v-model="address"
      :readonly="loading" @keyup.enter="clickSearch" placeholder="请输入关键字">
      <template #append>
        <i class="pl-amappicker-search-icon f-i f-i-search" @click="clickSearch"></i>
      </template>
    </w-text>
  </w-vertical>
</template>

<script>
  import AMapLoader from '@amap/amap-jsapi-loader'

  export default {
    props: ['value', 'city', 'zoom'],
    data() {
      let v = this.value || false
      return {
        loading: true,
        map: null,
        marker: null,
        lng: v.lng,
        lat: v.lat,
        address: v.address,
        searchPos: false,
        searchLocation: false,
      }
    },
    methods: {
      val() {
        return this.address ? {
          lng: this.lng,
          lat: this.lat,
          address: this.address
        } : null
      },
      click(e) {
        this.geoLngLat(e.lnglat)
      },
      clickSearch(e) {
        !this.loading && this.address && this.geoLocation(this.address)
      },
      geoLocation(address) {
        this.searchLocation = address
        //加载地理编码插件
        let MGeocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all'
        });
        //逆地理编码
        MGeocoder.getLocation(address, (status, result) => {
          if (status === 'complete' && result.geocodes.length && address === this.searchLocation) {
            let lnglat = result.geocodes[0].location
            this.lng = lnglat.lng
            this.lat = lnglat.lat
            this.address = result.geocodes[0].formattedAddress
            this.addMarker(lnglat, this.address, true)
          }
        })
      },
      geoLngLat(lnglat) {
        this.searchPos = lnglat
        //加载地理编码插件
        let MGeocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: 'all'
        });
        //逆地理编码
        MGeocoder.getAddress(lnglat, (status, result) => {
          if (status === 'complete' && result.info === 'OK' && lnglat.lng === this.searchPos.lng && lnglat
            .lat === this.searchPos.lat) {
            this.lng = lnglat.lng
            this.lat = lnglat.lat
            this.address = result.regeocode.formattedAddress
            this.addMarker(lnglat, result.regeocode.formattedAddress)
          }
        })
      },
      addMarker(lnglat, address, fit) {
        if (this.marker) {
          this.marker.setPosition(lnglat)
        } else {
          this.marker = new AMap.Marker({
            position: lnglat,
            icon: 'http://webapi.amap.com/images/marker_sprite.png',
            map: this.map,
            offset: new AMap.Pixel(-8, -34)
          })
        }
        let infoWindow = new AMap.InfoWindow({
          content: address,
          autoMove: true,
          offset: new AMap.Pixel(0, -39),
        })
        infoWindow.open(this.map, lnglat)
        fit && this.map.setFitView(this.marker)
      },
    },
    mounted() {
      $.vm(this).showLoading(true)
      let map
      let opt = {}
      let v = this.value || false
      AMapLoader.load({
        key: '248c8c0a0e198cc298fc48920cfd967f', //首次load必填
        version: '2.0',
        plugins: ['AMap.Scale', 'AMap.Geocoder']
      }).then((AMap) => {
        this.loading = false
        $.vm(this).showLoading(false)
        if (v) {
          opt.center = [v.lng, v.lat]
        }
        map = new AMap.Map(this.$refs.container, opt)
        map.addControl(new AMap.Scale())
        if (!v && this.city) map.setCity(this.city)
        map.setZoom(this.zoom || 13)
        this.map = map
        if (v) {
          this.addMarker(new AMap.LngLat(v.lng, v.lat), v.address)
        }
        map.on('click', this.click)
      }).catch((e) => {
        console.error(e)
      })
    }
  }
</script>

<style>
  .pl-amappicker-search {
    margin: 10px;
  }
  .pl-amappicker-search-icon {
    width: 30px;
    text-align: center;
    cursor: pointer;
  }
</style>
